<template>
	<div id="pageBox" ref="pageBox">
		<div v-if="!pageLoading">
			<Header :tabList="tabList" @tabChange="tabChange"></Header>
			<div v-if="tabList[0] && tabList[0].id === nowType">
				<Banner :banner="bannerList"></Banner>
				<Classification :list="guidanceList"></Classification>
				<div v-if="boutiqueList && boutiqueList.length" class="choice pd14">
					<div class="title">精选</div>
					<div v-if="boutiqueList[0] && boutiqueList[0].coverImg" class="content">
						<div class="leftImg" @click="projectDetail(boutiqueList[0].id)">
							<img :src="boutiqueList[0].coverImg" alt="">
						</div>
						<div class="rightImg">
							<div v-if="boutiqueList[1] && boutiqueList[1].coverImg" class="topImg" @click="projectDetail(boutiqueList[1].id)">
								<img :src="boutiqueList[1] && boutiqueList[1].coverImg" alt="">
							</div>
							<div v-if="boutiqueList[2] && boutiqueList[2].coverImg" class="bottomImg" @click="projectDetail(boutiqueList[2].id)">
								<img :src="boutiqueList[2] && boutiqueList[2].coverImg" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="mostTab pd14">
					<ul class="tabBox">
						<li class="tabItem" :class="{active:hotNew=='newest'}">
							<span @click="mostTabChange('newest')">最新</span>
						</li>
						<li class="tabItem" :class="{active:hotNew=='hottest'}">
							<span @click="mostTabChange('hottest')">最热</span>
						</li>
					</ul>
					<span class="tabHk" :class="'tabHk'+hotNew"></span>
				</div>
			</div>
			<div class="pd14 commonlist">
				<CommonList :listData="listData" :lastPage="lastPage" @more="onMore"></CommonList>
			</div>
		</div>
		<!-- <img class="loading" v-if="pageLoading" src="@/assets/img/loading.gif"> -->
		<div class="gotoTop" @click="gotoTopFun" :class="{toTopShow:toTopShow,toTopHidden:!toTopShow}">
			<i class="icon-totop iconfont importantColor"></i>
		</div>
		<CouponModal :couponList="coupon" :couponVisibile="couponVisibile" @onClickCoupon="onClickCoupon" @onClose="couponVisibile = false"></CouponModal>
	</div>
</template>

<script>
import { getNavigate, getGuidance } from "@/api/nav";
import { getBanner, getList, getNewHot, getBoutique } from "@/api/project";
import { getUser, getCoupon, fetchCoupon } from '@/api/user'
import { getToken } from '@/utils/auth'
import Header from "@/components/header"
import Banner from "@/components/banner"
import SongSheet from "@/components/songSheet"
import Classification from "@/components/classification"
import CommonList from "@/components/commonList"
import CouponModal from "@/components/couponModal"
	export default {
		components:{
			Banner,
			Header,
			SongSheet,
			Classification,
			CommonList,
			CouponModal,
		},
		data(){
			return {
				pageLoading:true,
				tabList:[],
				bannerList:[],
				guidanceList:[],
				boutiqueList: [],
				listData:[],
				nowType: '',
				hotNew: 'newest',
				toTopShow:false,
				form: {
					page: 1,
					limit: 10,
				},
				coupon: [],
				couponVisibile: false
			}
		},
		computed:{
			lastPage() {
				const { listData, form } = this
				return listData.length < form.page * form.limit
			}
		},
		created(){
			this.initToken()
			this.windowScroll();

		},
		methods:{
			initToken () {
				const { jwt } = this.$route.query || getToken();
				if (jwt) {
					this.getUserInfo()
				}
				this.getTabList();
				this.getGuidance();
				this.getBanner();
				// 获取精选的项目
				this.getBoutique()
				// 获取最新/最热的列表
				this.getHomeList();
				this.getCoupon()
			},
			getUserInfo() {
				getUser().then(res => {
					this.$store.commit('UPDATE_USER', res.userInfo)
					localStorage.setItem('userInfo', JSON.stringify(res.userInfo))
				})
			},
			mostTabChange(tabNum){
				this.hotNew = tabNum;
				this.form.page = 1
				this.listData = []
				this.getHomeList()
			},
			// 回到顶部
			gotoTopFun(){
				this.animationToTop(300);
			},
			animationToTop(time){
				let intervalTime = 10;
				let scrollY = window.scrollY;
				let once = (intervalTime / time * scrollY).toFixed(0);
				let timer = setInterval(()=>{
					scrollY = scrollY - once;
					if(scrollY <= 0){
						scrollY = 0;
						clearInterval(timer);
					}
					scrollTo(0,scrollY);

				},intervalTime)
			},
			windowScroll(){
				window.onscroll = () => {
	        let winScrollY = window.scrollY;
	        if(300 <= winScrollY){
	          this.toTopShow = true;
	        }else{
	          this.toTopShow = false;
	        }
	      }
			},
			getTabList(){
				this.tabList = []
				getNavigate().then(res=>{
					this.tabList = res.page.list;
					this.nowType = this.tabList[0].id
					this.pageLoading = false;
				})
			},
			getGuidance() {
				getGuidance().then(res=>{
					this.guidanceList = res.page.list;
				})
			},
			getHomeList(){
				getNewHot(this.hotNew, this.form).then(res=> {
					this.listData = this.listData.concat(res.page.list);
				})
			},
			getBanner(){
				getBanner().then(res=>{
					this.bannerList = res.page.list;
					this.pageLoading = false;
				})
			},
			getBoutique(){
				getBoutique().then(res => {
					this.boutiqueList = res.page.list
				})
			},
			getCoupon() {
				getCoupon().then(res => {
					if (res.data  && res.data.length) {
						this.coupon = res.data
						this.couponVisibile = true
					} else {
						this.couponVisibile = false
					}
				})
			},
			// 精选点击 跳转到项目详情
			projectDetail(id){
				this.$router.push({path: 'details', query: {id}})
			},
			tabChange(typeId){
				if (typeId) {
					this.nowType = typeId
					this.listData = []
				}
				// this.form.page = 1;
				if (this.tabList[0].id === this.nowType) { // 推荐
					this.getHomeList();
				} else {
					this.getProjectList(this.nowType)
				}
			},
			getProjectList(type) {
				getList(type, this.form).then(res=> {
					this.listData = this.listData.concat(res.page.list);
				})
			},
			onMore() {
				this.form.page++
				this.tabChange()
			},
			// 选择领取的优惠券
			onClickCoupon(id) {
				console.log(id);
				fetchCoupon(id).then(res => {
					alert('领取成功')
					this.getCoupon()
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	#banner{
		margin-bottom:14px;
	}
	#pageBox{
		.choice{
			width:100%;
			margin-top:10px;
			.title{
				font-size:0.16rem;
				font-weight: bold;
				margin-bottom:10px;
			}
			.content{
				width:100%;
				overflow:hidden;
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				.leftImg{
					float:left;
					width:1.68rem;
					height:2.4rem;
					background:#999;
				}
				.rightImg{
					float:right;
					width:1.68rem;
					height:2.4rem;
					.topImg{
						width:1.68rem;
						height:1.15rem;
						background:#999;
					}
					.bottomImg{
						margin-top:0.1rem;
						width:1.68rem;
						height:1.15rem;
						background:#999;
					}
				}
			}
		}
		.mostTab{
			position:relative;
			width:100%;
			margin-top:20px;
			line-height: 0.3rem;
			.tabBox{
				width:100%;
				border-bottom:1px solid #dedede;
				.tabItem{
					display: inline-block;
					width:0.46rem;
					font-size:0.16rem;
					color:#666;
					&.active{
						color:#31c27c;
						font-weight: bold;
					}
				}
			}
			.tabHk{
				position:absolute;
				background:#31c27c;
				width:0.34rem;
				height:4px;
				bottom:0;
				transition:all ease-out 100ms;
				&.tabHknewst{
					left:0.14rem;
				}
				&.tabHkhottest{
					left:0.63rem;
				}
			}
		}
		.gotoTop{
			position:fixed;
			width:0.5rem;
			height:0.5rem;
			background:#fff;
			border-radius: 50%;
			box-shadow: 0 0 10px 1px #dedede;
			right:0.2rem;
			text-align: center;
			line-height: 0.5rem;
			z-index: 98;
			transition: all linear 600ms;
			i{
				font-size:0.24rem;
			}
			&.toTopShow{
				bottom:1rem;
			}
			&.toTopHidden{
				bottom:-1.5rem;;
			}
		}
	}
	.commonlist{
		padding-top: .2rem;
	}
</style>
